/* 模块1：顶部导航 */
.top-nav {
  height: 25px;
  background-color: #111;
  color: #fff;

  ul {
    /* 开启 flex 布局 */
    display: flex;
    /* 主轴对齐：靠右 */
    justify-content: flex-end;
    /* 文字垂直居中 */
    height: 25px;
    line-height: 25px;

    li {
      /* 修改普通文字大小 */
      font-size: 12px;
      margin-left: 20px;

      .iconfont {
        /* 修改字体图标大小 */
        font-size: 12px;
      }
    }
  }
}

/* 模块2：主体导航 */
.navbar {
  height: 78px;

  .container {
    /* 开启 flex 布局 */
    display: flex;
    /* 👍 两端对齐 */
    justify-content: space-between;
    height: 78px;
    line-height: 78px;

    // 左边 logo
    .logo {
      img {
        width: 133px;
        height: 30px;
      }
    }

    // 中间列表
    ul {
      display: flex;

      li {
        margin: 0 15px;
      }
    }

    // 右边
    .right {
      .buy {
        margin-right: 20px;

        .icon-bags {
          // 字体图标本质是文字，可以修改字号让图标变大
          font-size: 20px;
        }
      }

      .icon-search {
        font-size: 20px;
      }
    }
  }
}

/* 模块3：轮播图 */
.swiper {
  width: 100%;
  height: 500px;
}

/* 模块4：推荐产品 */
.goods {
  h2 {
    font-size: 40px;
    height: 190px;
    line-height: 190px;
    text-align: center;
  }

  .goods-floor {
    width: 1300px;
    margin: 0 auto;
    // 开启 flex 布局
    display: flex;
    // 设置两端对齐
    justify-content: space-between;
    margin-bottom: 30px;
  }

  .width01 {
    width: 855px;
  }

  .width02 {
    width: 410px;
  }
}

/* 模块5：返回顶部 */
.top {
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.3);
  // 固定定位
  position: fixed;
  // 右侧坐标：0
  right: 0;
  // 右侧坐标：40px
  bottom: 40px;
  // 开启 flex 布局
  display: flex;
  // 主轴：居中
  justify-content: center;
  // 侧轴：居中
  align-items: center;
  // 指针变小手
  cursor: pointer;
  // 添加过渡效果
  transition: all .4s;
  // 透明度设置为 0 隐藏
  opacity: 0;

  // 修改图标字体颜色和大小
  .iconfont {
    color: #fff;
    font-size: 30px;
  }

  // & 是连接符号，连接:hover时中间不带任何空格
  // 最终生成 .top:hover {}
  &:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
}